<?

if($_REQUEST[ajax]!="true")
{
?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8">
		<title>Select test</title>
		<script type="text/javascript" src="/jquery.js"></script>
		<script type="text/javascript" charset="utf-8">
		$(function(){
			$("select#ctlJob").change(function(){
				$.getJSON("/test.php",{id: $(this).val(), ajax: 'true'}, function(j){
					var options = '<option value="">Choose</option>';
					for (var i = 0; i < j.length; i++) {
						options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
					}
					$("#ctlPerson").html(options);
					$('#ctlPerson option:first').attr('selected', 'selected');
					$("#ctlLista").html('');
				})
			})	
			$("select#ctlPerson").change(function(){
				$("#ctlLista").html('');
				$.getJSON("/test.php",{id: $(this).val(), ajax: 'true'}, function(j){
					var options = '<ul>';
					for (var i = 0; i < j.length; i++) {
						options += '<li>"' + j[i].optionDisplay + '</li>';
					}
					options += '</ul>';
					$("#ctlLista").html(options);
					
				})
			})
					
		})
		</script>
	</head>

	<body>
		<select id="ctlJob">
			<option value="1">Manager</option>
			<option value="2">Lead Dev</option>
			<option value="3">Developer</option>
		</select>
		<select id="ctlPerson">

			<option value="1">Mark</option>
			<option value="2">Andy</option>
			<option value="3">Richard</option>
		</select>
		<div id="ctlLista"></div>
	</body>
</html>





<?
}
else 
{
	if ($_GET['id'] == 1) {
  		echo "[{optionValue:1, optionDisplay: 'A'}, {optionValue:11, optionDisplay: 'Arif'}, {optionValue:12, optionDisplay: 'JC'}]";
	} else if ($_GET['id'] == 2) {
  		echo "[{optionValue:2, optionDisplay: 'B'}, {optionValue:11, optionDisplay: 'Arif'}, {optionValue:12, optionDisplay: 'JC'}]";
	} else if ($_GET['id'] == 3) {
  		echo "[{optionValue:3, optionDisplay: 'C'}, {optionValue:11, optionDisplay: 'Arif'}, {optionValue:12, optionDisplay: 'JC'}]";

	}
}


?>